<template>
	<view class="menu-container">
		<!-- 顶部区域 -->
		<view class="header">
			<!-- 轮播图 -->
			<swiper class="banner" circular autoplay interval="3000" duration="1000">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image :src="item.image" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<u-icon name="search" size="20" color="#909399"></u-icon>
				<input type="text" v-model="searchKeyword" placeholder="搜索菜品" @input="onSearch" />
				<u-icon v-if="searchKeyword" name="close" size="20" color="#909399" @click="clearSearch"></u-icon>
			</view>
		</view>

		<!-- 点餐主体内容 -->
		<view class="menu-content">
			<!-- 左侧分类列表 -->
			<scroll-view class="category-list" scroll-y>
				<view v-for="(category, index) in categories" :key="category.id" class="category-item"
					:class="{ active: currentCategory === index }" @click="selectCategory(index)">
					<text>{{ category.name }}</text>
					<view class="category-right">
						<text v-if="category.count > 0" class="badge">{{ category.count }}</text>
						<u-icon name="arrow-right" size="16" color="#909399"></u-icon>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧菜品列表 -->
			<scroll-view class="dish-list" scroll-y :scroll-into-view="scrollToCategory" @scroll="onScroll">
				<view v-for="category in categories" :key="category.id" :id="category.id" class="dish-category">
					<view class="category-title">{{ category.name }}</view>

					<view v-for="dish in category.dishes" :key="dish.id" class="dish-item"
						:class="{ highlight: searchResult && searchResult.categoryId === category.id && searchResult.dishId === dish.id }">
						<image :src="dish.image" mode="aspectFill" class="dish-image" />

						<view class="dish-info">
							<view class="dish-name-wrap">
								<text class="dish-name">{{ dish.name }}</text>
								<u-icon v-if="dish.isHot" name="star-fill" size="16" color="#ff9900"></u-icon>
							</view>
							<text class="dish-desc">{{ dish.description }}</text>
							<view class="dish-price">
								<view class="price-wrap">
									<u-icon name="rmb-circle" size="16" color="#ff4d4f"></u-icon>
									<text>{{ dish.price }}</text>
								</view>

								<!-- 选择按钮 -->
								<view class="select-button" @click.stop="toggleDish(dish)">
									<text :class="{ 'selected': dish.count > 0 }">
										{{ dish.count > 0 ? '已选' : '选择' }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部购物车 -->
		<view class="cart" v-if="totalCount > 0">
			<view class="cart-icon">
				<u-icon name="shopping-cart" size="24" color="#1296db"></u-icon>
				<text class="cart-count">{{ totalCount }}</text>
			</view>
			<view class="cart-info">
				<text class="total-price">¥{{ totalPrice }}</text>
			</view>
			<view class="checkout" @click="onCheckout">
				<text>去结算</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getMenuData } from "@/api/menus/menus.js"
export default {
	data() {
		return {
			banners: [
				{ image: '/static/banner/banner1.jpg' },
				{ image: '/static/banner/banner2.jpg' },
				{ image: '/static/banner/banner3.jpg' },
				{ image: '/static/banner/banner4.jpg' },
				{ image: '/static/banner/banner5.jpg' }
			],
			categories: [],
			currentCategory: 0,
			scrollToCategory: '',
			searchKeyword: '',
			searchResult: null,
			peopleCount: 0
		}
	},
	async created() {
		const res = await getMenuData()
		this.categories = res.data		
	},
	computed: {
		totalCount() {
			return this.categories.reduce((total, category) => {
				return total + category.dishes.reduce((sum, dish) => sum + dish.count, 0)
			}, 0)
		},

		totalPrice() {
			return this.categories.reduce((total, category) => {
				return total + category.dishes.reduce((sum, dish) => sum + dish.price * dish.count, 0)
			}, 0)
		}
	},

	methods: {
		selectCategory(index) {
			this.currentCategory = index
			this.scrollToCategory = this.categories[index].id
			this.searchResult = null
		},

		toggleDish(dish) {
			dish.count = dish.count > 0 ? 0 : 1;
			this.updateCategoryCount();
		},

		updateCategoryCount() {
			this.categories.forEach(category => {
				category.count = category.dishes.reduce((sum, dish) => sum + dish.count, 0)
			})
		},

		onScroll(e) {
			// 处理滚动,更新当前分类
		},

		onSearch() {
			if (!this.searchKeyword) {
				this.searchResult = null;
				this.currentCategory = 0;
				this.scrollToCategory = this.categories[0].id;
				return;
			}

			// 简单的模糊查询
			for (let i = 0; i < this.categories.length; i++) {
				const category = this.categories[i];
				const foundDish = category.dishes.find(dish =>
					dish.name.includes(this.searchKeyword) ||
					dish.description.includes(this.searchKeyword)
				);

				if (foundDish) {
					// 切换到对应分类
					this.currentCategory = i;
					this.scrollToCategory = category.id;

					// 标记搜索结果
					this.searchResult = {
						categoryId: category.id,
						dishId: foundDish.id
					};
					return;
				}
			}

			// 未找到匹配项
			this.searchResult = null;
		},

		clearSearch() {
			this.searchKeyword = '';
			this.searchResult = null;
			this.currentCategory = 0;
			this.scrollToCategory = this.categories[0].id;
		},

		onCheckout() {
			// 收集已选择的菜品
			const selectedDishes = [];
			this.categories.forEach(category => {
				category.dishes.forEach(dish => {
					if (dish.count > 0) {
						selectedDishes.push({
							id: dish.id,
							name: dish.name,
							price: dish.price,
							count: dish.count,
							image: dish.image,
							categoryName: category.name
						});
					}
				});
			});

			// 如果没有选择菜品，提示用户
			if (selectedDishes.length === 0) {
				uni.showToast({
					title: '请先选择菜品',
					icon: 'none'
				});
				return;
			}

			// 准备订单数据
			const orderData = {
				dishes: selectedDishes,
				totalCount: this.totalCount,
				totalPrice: this.totalPrice
			};

			// 将订单数据转换为字符串并进行编码
			const orderDataStr = encodeURIComponent(JSON.stringify(orderData));

			// 跳转到结算页面
			uni.navigateTo({
				url: `/pages/checkout/checkout?orderData=${orderDataStr}`
			});
		},

		loadMore() {
			// 加载更多数据的方法（如果需要）
		},

		onShow() {
			// 获取存储的人数
			const people = uni.getStorageSync('orderPeople')
			if (people) {
				this.peopleCount = people
				// 使用完后可以清除存储
				uni.removeStorageSync('orderPeople')
			}
		}
	},
}
</script>

<style scoped>
.menu-container {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100rpx);
	/* 减去底部导航栏的高度 */
	position: fixed;
	/* 固定位置 */
	left: 0;
	right: 0;
	top: 0;
	bottom: 100rpx;
	/* 为底部导航栏留出空间 */
	overflow: hidden;
	/* 防止整体滚动 */
}

.header {
	background: #fff;
	padding-bottom: 10rpx;
	flex-shrink: 0;
	/* 防止头部压缩 */
}

.banner {
	height: 300rpx;
	width: 100%;
}

.banner image {
	width: 100%;
	height: 100%;
}

.search-bar {
	margin: 10rpx 20rpx;
	display: flex;
	align-items: center;
	background: #f5f5f5;
	padding: 6rpx 30rpx;
	border-radius: 30rpx;
	height: 60rpx;
}

.search-bar image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}

.search-bar input {
	flex: 1;
	font-size: 26rpx;
	margin: 0 20rpx;
}

.menu-content {
	flex: 1;
	display: flex;
	overflow: hidden;
	position: relative;
}

.category-list {
	width: 160rpx;
	background: #f7f7f7;
	height: 100%;
	/* 确保左侧分类列表高度填满 */
	flex-shrink: 0;
	/* 防止压缩 */
}

.category-item {
	padding: 30rpx 20rpx;
	font-size: 28rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.category-item.active {
	background: #fff;
	color: #1296db;
}

.category-right {
	display: flex;
	align-items: center;
}

.badge {
	background: #ff4d4f;
	color: #fff;
	font-size: 20rpx;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.dish-list {
	flex: 1;
	background: #fff;
	height: 100%;
	/* 确保右侧菜品列表高度填满 */
}

.dish-category {
	padding: 20rpx;
}

.category-title {
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0;
}

.dish-item {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.dish-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.dish-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.dish-name-wrap {
	display: flex;
	align-items: center;
}

.dish-name {
	margin-right: 10rpx;
}

.hot-icon {
	font-size: 24rpx;
}

.dish-desc {
	font-size: 24rpx;
	color: #999;
	margin: 10rpx 0;
}

.dish-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #ff4d4f;
	font-size: 32rpx;
}

.price-wrap {
	display: flex;
	align-items: center;
}

.price-symbol {
	font-size: 24rpx;
	margin-right: 4rpx;
}

.select-button {
	padding: 4rpx 20rpx;
	border-radius: 30rpx;
	border: 1px solid #1296db;
	font-size: 24rpx;
}

.select-button text {
	color: #1296db;
}

.select-button text.selected {
	color: #ff4d4f;
}

.select-button:active {
	opacity: 0.8;
}

.cart {
	position: fixed;
	bottom: 100rpx;
	/* 放在底部导航栏上方 */
	left: 0;
	right: 0;
	height: 100rpx;
	background: #fff;
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	z-index: 100;
}

.cart-icon {
	position: relative;
}

.cart-icon image {
	width: 60rpx;
	height: 60rpx;
}

.cart-count {
	position: absolute;
	top: -5rpx;
	right: -5rpx;
	background: #ff4d4f;
	color: #fff;
	font-size: 20rpx;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.cart-info {
	flex: 1;
	padding: 0 30rpx;
}

.total-price {
	font-size: 36rpx;
	color: #ff4d4f;
	font-weight: bold;
}

.checkout {
	background: linear-gradient(to right, #1296db, #0e77b0);
	color: #fff;
	padding: 15rpx 40rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
}

.dish-item.highlight {
	background-color: rgba(18, 150, 219, 0.1);
}
</style>